<template>
	<view class="" style="background:#fff;margin:20rpx;padding:30rpx;">
		<view class="padding-top-bottom-20">我的联系方式</view>
		<fui-form-item asterisk bottomBorder label="联系人:">
			<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入联系人"></fui-input>
		</fui-form-item>

		<fui-form-item asterisk bottomBorder label="手机号:">
			<view class="text-align-right">
				<fui-switch :scaleRatio="0.7" :checked="formData.isShowMobile" @change="mobileChange"
					color="#FFDD00"></fui-switch>
			</view>
		</fui-form-item>

		<view class="text-align-right padding-top-bottom-20" style="border-bottom:1rpx solid #efefef;"
			v-if="formData.isShowMobile">
			<fui-input v-model="formData.UserMobile" :borderBottom="false" :padding="[0]"
				placeholder="请输入手机号"></fui-input>
		</view>
		<fui-form-item asterisk bottomBorder label="微信号:">
			<view class="text-align-right">
				<fui-switch :scaleRatio="0.7" :checked="formData.isShowWeixin" @change="weixinChange"
					color="#FFDD00"></fui-switch>
			</view>
		</fui-form-item>

		<view class="text-align-right padding-top-bottom-20" style="border-bottom:1rpx solid #efefef;"
			v-if="formData.isShowWeixin">
			<fui-input v-model="formData.WeixinCode" :borderBottom="false" :padding="[0]"
				placeholder="请输入微信号"></fui-input>
		</view>

		<fui-form-item asterisk bottomBorder label="QQ号:">
			<view class="text-align-right">
				<fui-switch :scaleRatio="0.7" :checked="formData.isShowQQ" @change="qqChange"
					color="#FFDD00"></fui-switch>
			</view>
		</fui-form-item>

		<view class="text-align-right padding-top-bottom-20" style="border-bottom:1rpx solid #efefef;"
			v-if="formData.isShowQQ">
			<fui-input v-model="formData.QQCode" :borderBottom="false" :padding="[0]" placeholder="请输入QQ号"></fui-input>
		</view>

		<button class="preserve-button" @click="onSubmitInfo">保存</button>
		<fui-toast ref="toast"></fui-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					ContactName: '',
					UserMobile: '',
					WeixinCode: '',
					QQCode: '',
					isShowMobile: false,
					isShowWeixin: false,
					isShowQQ: false,
				}
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			onInput(event) {
				console.log(event, 'eventaaa');
				// 获取输入框的当前值
				let value = event;
				this.$nextTick(() => {
					this.formData.WeixinCode = value.replace(/[\u4E00-\u9FA5]/g, "");
				});
			},
			getUserInfo() {
				this.$httpost('/UserAction/getUserInfo', {}).then(res => {
					// console.log('getUserInfo', res)
					if (res.code == 200) {
						this.formData.ContactName = res.data.UserInfo.ContactName
						this.formData.UserMobile = res.data.UserInfo.UserMobile
						this.formData.isShowMobile = res.data.UserInfo.isShowMobile
						this.formData.WeixinCode = res.data.UserInfo.WeixinCode
						this.formData.isShowWeixin = res.data.UserInfo.isShowWeixin
						this.formData.QQCode = res.data.UserInfo.QQCode
						this.formData.isShowQQ = res.data.UserInfo.isShowQQ
					}
				});
			},
			//判断手机号是否符合正则
			checkPhone() {
				let p = /^1[3456789]\d{9}$/
				if (p.test(this.formData.UserMobile)) {
					return true
				} else {
					return false
				}
			},
			// 控制显示手机号
			mobileChange(event) {
				// console.log(event,'手机号')
				this.formData.isShowMobile = event.detail.value
			},
			// 控制显示微信号
			weixinChange(event) {
				this.formData.isShowWeixin = event.detail.value
				// console.log(event,'weixinhao')
			},
			// 控制显示微信号
			qqChange(event) {
				this.formData.isShowQQ = event.detail.value
				// console.log(event,'weixinhao')
			},
			// 上传成功返回
			uploadSuccess() {},
			// 上传失败返回
			uploadError() {},

			onSubmitInfo() {

				if (!this.formData.ContactName) {
					uni.showToast({
						title: '请填写联系人！',
						icon: 'none'
					})
					return false;
				}
				// isShowMobile
				// isShowWeixin
				// isShowQQ
				if (!this.formData.isShowMobile && !this.formData.isShowWeixin && !this.formData.isShowQQ) {
					uni.showToast({
						title: '手机号、微信号、QQ务至少展示一项！',
						icon: 'none'
					})
					return false;
				}

				if (!this.formData.UserMobile && !this.formData.QQCode && !this.formData.WeixinCode) {
					uni.showToast({
						title: '手机号、微信号、QQ号务必填写一项！',
						icon: 'none'
					})
					return false;
				}
				if (this.formData.UserMobile) {
					let checkPhone = this.checkPhone();
					if (!checkPhone) {
						uni.showToast({
							title: '请输入正确的手机号！',
							icon: 'none'
						})
						return false;
					}
				}

				this.$httpost('/UserAction/saveMyContactInfo', this.formData).then(res => {
					if (res.code == 200) {
						uni.setStorageSync('UserContactInfo', this.formData)

						if (res.data.Wallet.WalletID !== 0) {
							let options = {}
							options.text = '恭喜您获得 ' + Math.round(res.data.Wallet.WalletMoney) + ' 金币';
							options.src = this.$baseUrl + "icon/goldcoin.png";
							this.$refs.toast.show(options)
						}

						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				});
			}
		}
	}
</script>

<style>
	:deep(.fui-form__asterisk) {
		left: 60px !important;
	}

	.uni-forms-item__label {
		position: relative;
	}

	.is-required {
		position: absolute;
		left: 80rpx;
	}

	.uni-easyinput__content-input {
		text-align: right;
	}

	.uni-forms-item {
		margin-bottom: 0 !important;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #efefef;
	}

	.preserve-button {
		background: #FFDD00;
		font-size: 28rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 50rpx;
		margin-top: 20rpx;
	}

	.preserve-button::after {
		border: none;
	}
</style>